<template>
  <div class="filter-box">
    <transition name="expand2">
      <div class="opacityDom" @click="hidden" v-show="$parent.filterOpenState"></div>
    </transition>
    <transition name="expand">
      <div class="filter-view" v-show="$parent.filterOpenState">
        <div class="btn-wrap display-flex">
          <span @click="reset" class="btn-reset flex1">重置</span>
          <span @click="doFilter" class="btn-dofilter flex1">完成</span>
        </div>
        <ul class="filter-content">
          <!-- 时间 -->
          <li class="filter-item clearfix" v-if="needTime">
            <h3 class="title">时间</h3>
            <div class="filter-tab-button">
              <a :class="{'active': showTimeModule === 1}" @click="choiceTimeModule(1)">年度</a>
              <a :class="{'active': showTimeModule === 2}" @click="choiceTimeModule(2)">月度</a>
              <a :class="{'active': showTimeModule === 3}" @click="choiceTimeModule(3)">自定义</a>
            </div>
            <div v-show="showTimeModule === 1">
              <span id="chooseYear" :class="['item', 'flex1', {'item-active' : dateSeg === 'year'}]" @click="setTimeYear">
                <datetime :title="currentYear"
                          confirm-text="确认"
                          :max-year="nowYear"
                          :min-year="2015"
                          cancel-text="取消"
                          year-row="{value}年"
                          month-row="{value}月"
                          day-row="{value}日"
                          v-model="chooseYear">
                </datetime>
              </span>
            </div>
            <div v-show="showTimeModule === 2">
              <div class="display-flex" @click="setTimeMonth">
                <div id="chooseMonthStart" class="item flex1 item-date">
                  <datetime :title="currentMonth"
                            :max-year="nowYear"
                            :min-year="2015"
                            confirm-text="确认"
                            cancel-text="取消"
                            year-row="{value}年"
                            month-row="{value}月"
                            v-model="chooseMonthStart">
                  </datetime>
                </div>
                <span style="padding-top:3.5%;">__</span>
                <div id="chooseMonthEnd" class="item flex1 item-date">
                  <datetime :title="currentMonth"
                            :max-year="nowYear"
                            :min-year="2015"
                            confirm-text="确认"
                            cancel-text="取消"
                            year-row="{value}年"
                            month-row="{value}月"
                            v-model="chooseMonthEnd">
                  </datetime>
                </div>
              </div>
            </div>
            <div v-show="showTimeModule === 3">
              <div class="display-flex" @click="customData">
                <div id="startDate" class="item flex1 item-date">
                  <datetime title="开始时间"
                            confirm-text="确认"
                            :min-year="2015"
                            :max-year="nowYear"
                            v-model="startDate"
                            year-row="{value}年"
                            month-row="{value}月"
                            day-row="{value}日"
                            cancel-text="取消"></datetime>
                </div>
                <span style="padding-top:3.5%;">__</span>
                <div id="endDate" class="item flex1 item-date">
                  <datetime title="结束时间"
                            confirm-text="确认"
                            :min-year="2015"
                            :max-year="nowYear"
                            v-model="endDate"
                            year-row="{value}年"
                            month-row="{value}月"
                            day-row="{value}日"
                            cancel-text="取消"></datetime>
                </div>
              </div>
            </div>
          </li>
          <!-- 产业群类型 单选 -->
          <li class="filter-item clearfix" v-if="needIndustryType">
            <h3 class="title">产业群类型</h3>
            <div v-if="defaultIndustryType === '' || defaultIndustryType === '全部'">
              <span class="item"
                v-for="item in industryTypeList"
                :id="item.id"
                @click="addToInDustryType(item)"
                :class="[{'item-active' : item.value === curIndustryType}]">
                {{item.name}}
              </span>
            </div>
            <div v-else>
              <span class="item item-active"
                v-show="defaultIndustryType === item.name"
                v-for="item in industryTypeList"
                :id="item.id"
                @click="addToInDustryType(item)">
                {{item.name}}
              </span>
            </div>
          </li>
          <!-- 来源类型 多选 -->
          <li class="filter-item clearfix" v-if="needSourceType">
            <h3 class="title">来源类型</h3>
            <div class="">
              <span class="item"
                v-for="item in sourceTypeList"
                :id="item.id"
                @click="addToSourceType(item)"
                :class="[{'item-active' : curSourceType.split(',').indexOf(item.value) > -1}]">
                {{item.name}}
              </span>
            </div>
          </li>
          <!-- 整体情感 多选 -->
          <li class="filter-item clearfix" v-if="needTotalEmotion">
            <h3 class="title">产业群类型</h3>
            <div class="">
              <span class="item"
                v-for="item in totalEmotionList"
                :id="item.id"
                @click="addToTotalEmotion(item)"
                :class="[{'item-active' : curTotalEmotion.split(',').indexOf(item.value) > -1}]">
                {{item.name}}
              </span>
            </div>
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>
<script>
import { Calendar, Group, Selector, Datetime, } from 'vux'

const TIMESTAMP = 24 * 60 * 60 * 1000
const industryTypeList = [
  { id: 1, name: '全部', value: '' },
  { id: 2, name: '乘用车', value: '乘用车' },
  { id: 3, name: '商用车', value: '商用车' },
  { id: 4, name: '云轨', value: '云轨' },
  { id: 5, name: '电子', value: '电子' },
  { id: 6, name: '电池', value: '电池' },
]
const sourceTypeList = [
  { id: 1, name: '新闻', value: '新闻' },
  { id: 2, name: '微博', value: '微博' },
  { id: 3, name: '微信', value: '微信' },
  { id: 4, name: '论坛', value: '论坛' },
]
const totalEmotionList = [
  { id: 1, name: '非负面', value: '非负面' },
  { id: 2, name: '负面', value: '负面' },
]


/* common methods */
// 查找元素是否在数组中存在
function findObjIndex (arr, obj) {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === obj) {
      return i
    }
  }
  return -1
}

/**
 * 获取当前时间年月
 * @param type 1表示xxxx-xx 2表示xxxx年xx月
 */
function getCurrentMonth (type) {
  let date = new Date()
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    month = month < 10 ? '0' + month : '' + month
    if (type === 1) {
      return year + '-' + month
    } else if (type === 2) {
      return year + '年' + month + '月'
    }
}

export default {
  name: "",
  data() {
    return {
      // 时间
      value: '',
      startDate: '',
      endDate: '',
      initDefaultDateCount: 0,
      dateSeg: 'year',
      chooseYear: (new Date()).getFullYear() + '-01-01',
      chooseSeason: '',
      chooseMonthStart: '',
      chooseMonthEnd: '',
      currentYear: (new Date()).getFullYear() + '年',
      currentMonth: getCurrentMonth(2),
      showTimeModule: 1, // 筛选时间的模式，1：年度、2：月度、3：自定义
      // 产业群类型
      industryTypeList: industryTypeList,
      curIndustryType: '',
      //
      sourceTypeList: sourceTypeList,
      curSourceType: '',
      //
      totalEmotionList: totalEmotionList,
      curTotalEmotion: '',
    }
  },
  props: {
    needTime: {
      type: Boolean,
      default: false,
    },
    needIndustryType: {
      type: Boolean,
      default: false,
    },
    defaultIndustryType: {
      type: String,
      default: ''
    },
    needSourceType: {
      type: Boolean,
      default: false,
    },
    needTotalEmotion: {
      type: Boolean,
      default: false,
    },
    needDealState: {
      type: Boolean,
      default: false,
    },
    needCc: {
      type: Boolean,
      default: false,
    },
    'choosePlatforms': {
      default: ''
    },
    'choosePlatformsId': {

    },
    'pageId': {

    },
    'defaultOrgId': {

    },
    'defaultCategory': {

    },
    'defaultCategoryId': {

    },
    'defaultPlatform': {

    },
    'tabId': {

    },
    'filterButton': {

    },
    'defaultStartDate': {

    },
    'defaultEndDate': {

    }
  },
  computed: {
    nowYear: function () {
      return new Date().getFullYear()
    }
  },
  methods: {
    hidden() {
      this.slideState = false
      setTimeout(() => {
        this.$parent.filterOpenState = false
      }, 200)
    },
    reset() {
      this.chooseBrands = []
      this.chooseBrandsID = []
      this.chooseCategorys = []
      this.chooseCategorysID = []
      this.choosePlatforms = []
      this.choosePlatformsId = []
      this.departmentActiveIndex = -1
      this.categorysActive = ''
      this.dateSeg = ''
      var item = document.getElementsByClassName('item')
      for (let i = 0; i < item.length; i++) {
        item[i].classList.remove('item-active')
      }
    },
    doFilter() {
      try {
        this.$parent.filterOpenState = false

      } catch(err) {
        console.error(err)
      }
    },
    choiceTimeModule(value) {
      if (value === 1) {
        this.setTimeYear()
      } else if (value === 2) {
        this.setTimeMonth()
      } else if (value === 3) {
        this.customData()
      }
      this.showTimeModule = value
    },
    // 选择年
    setTimeYear() {
      this.dateSeg = 'year'
      // this.changeYear(this.chooseYear)
      var dpEle = document.querySelectorAll('.dp-container')
      for (var i = 0; i < dpEle.length; i++) {
        if (dpEle[i].style.display === 'block') {
          dpEle[i].querySelectorAll('.dp-content .dp-item')[2].style.display = 'none'
          dpEle[i].querySelectorAll('.dp-content .dp-item')[1].style.display = 'none'
        }
      }
    },
    changeYear(val) {

    },
    // 选季度
    setTimeSeason() {
      this.dateSeg = 'season'
      var dpEle = document.querySelectorAll('.dp-container')
      for (var i = 0; i < dpEle.length; i++) {
        if (dpEle[i].style.display === 'block') {
          if (!dpEle[i].querySelectorAll('.dp-content .dp-item')[2]) {
            return
          }
          dpEle[i].querySelectorAll('.dp-content .dp-item')[2].style.display = 'none'
          dpEle[i].querySelectorAll('.dp-content .dp-item')[1].getElementsByClassName('scroller-content')[0].style.transform = 'translate3d(0px, 0px, 0px)'
          var scrollItemEle = dpEle[i].querySelectorAll('.dp-content .dp-item:nth-child(2) .scroller-content .scroller-item')
          for (var j = 4; j < 13; j++) {
            if (scrollItemEle[j]) {
              scrollItemEle[j].style.display = 'none'
            }
          }
        }
      }
    },
    changeSeason(val) {

    },
    // 选择月
    setTimeMonth() {
      this.dateSeg = 'month'
      var dpEle = document.querySelectorAll('.dp-container')
      for (var i = 0; i < dpEle.length; i++) {
        if (dpEle[i].style.display === 'block') {
          dpEle[i].querySelectorAll('.dp-content .dp-item')[2].style.display = 'none'
        }
      }
    },
    changeMonth(val) {

    },
    // 自定义日期
    customData() {
      this.dateSeg = 'other'
      if (!this.startDate) {
        this.startDate = new Date(new Date() - 30 * TIMESTAMP).format('yyyy-MM-dd')
      }
      if (!this.endDate) {
        this.endDate = new Date(new Date() - 1 * TIMESTAMP).format('yyyy-MM-dd')
      }
    },
    // 选择 产业群类型
    addToInDustryType(target) {
      this.curIndustryType = target.value;
    },
    addToSourceType(target) {
      const value = target.value
      let array = this.curSourceType.split(',')
      if (array.indexOf(value) > -1) {
        array = array.filter(item => item !== value)
      } else {
        array.push(value)
      }
      this.curSourceType = array.toString()
    },
    addToTotalEmotion(target) {
      const value = target.value
      let array = this.curTotalEmotion.split(',')
      if (array.indexOf(value) > -1) {
        array = array.filter(item => item !== value)
      } else {
        array.push(value)
      }
      this.curTotalEmotion = array.toString()
    },
  },
  watch: {
    defaultStartDate: function (newV) {
      if (this.initDefaultDateCount < 2) {
        this.initDefaultDateCount++
        this.startDate = newV
      }
    },
    defaultEndDate: function (newV) {
      if (this.initDefaultDateCount < 2) {
        this.initDefaultDateCount++
        this.endDate = newV
      }
    },
    'chooseYear': function (newV) {
      document.querySelector('#chooseYear .weui-cell').innerHTML = this.chooseYear.substring(0, 4) + '年'
      // this.changeYear(newV)
    },
    'chooseMonthStart': function (newV) {
      document.querySelector('#chooseMonthStart .weui-cell').innerHTML = this.chooseMonthStart.substring(0, 4) + '年' + this.chooseMonthStart.substring(5, 7) + '月'
    },
    'chooseMonthEnd': function (newV) {
      document.querySelector('#chooseMonthEnd .weui-cell').innerHTML = this.chooseMonthEnd.substring(0, 4) + '年' + this.chooseMonthEnd.substring(5, 7) + '月'
    },
    'startDate': function () {
      document.querySelector('#startDate .weui-cell').innerHTML = this.startDate
    },
    'endDate': function () {
      document.querySelector('#endDate .weui-cell').innerHTML = this.endDate
    },
  },
  components: {
    Calendar,
    Group,
    Selector,
    Datetime,
  }
}
</script>
<style lang="less" scoped>
  @import '../../assets/less/default.less';
  .filter-box{
    width: 7.5rem;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1010;
  }
  .opacityDom{
    position: fixed;
    left: 0;
    top: 0;
    background: rgb(0,0,0);
    width: 100%;
    height: 100%;
    z-index: 1011;
    opacity: .3;
  }
  .tip {
    margin: 0 auto;
    padding-left: .4rem;
    text-align: left;
    color: #FFD38B;
    background: url('../../../static/img/icon-tip.png') no-repeat center left / .3rem .3rem;
  }

  .filter-content{
    max-height: 85vh;
    overflow-y: scroll;
  }

  .btn-wrap{

    span{
      padding: .25rem;
      text-align: center;
      font-size: .36rem;
    }
  }

  .btn-dofilter{
    color: #FFF;
    background: #4A90E2;
  }

  .btn-reset{
    color: #999;
    background: #F5F5F5;
  }

  .split-line{
    margin: 0 .1rem;
    color: rgba(222, 222, 222, 1);
  }

  .filter-view {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    padding-bottom: 15px;
    background-color: rgba(255, 255, 255, 1);
    overflow-y: scroll;
    z-index: 1012;
    left: 20%;
    .filter-item {
      padding: .2rem;
      /*border-bottom: 5px solid #f2f2f2;*/
    }

    .title {
      padding-bottom: .1rem;
      margin-top: .1rem;
      margin-bottom: .1rem;
      font-weight: 500;
      font-size: .32rem;
      color: #333;
    }

    .item {
      position: relative;
      display: inline-block;
      margin: .05rem .12rem;
      width: 28%;
      height: .8rem;
      font-size: .28rem;
      line-height: .8rem;
      text-align: center;
      border: 1px solid rgba(228, 228, 228, 1);
      border-radius: .05rem;
      color: rgba(153, 153, 153, 1);
      word-break:keep-all;
      white-space:nowrap;
      overflow-x: hidden;
      overflow-y: hidden;
    }

    .item-active {
      word-break:keep-all;
      white-space:nowrap;
      // overflow-x: scroll;
      background: rgba(246, 250, 255, 1) url(../../../static/img/filter-active-bg.png) no-repeat right bottom / 18%;
    }

    .btn-complete {
      padding: .2rem 0;
      width: 20VW;
      color: #333;
      text-align: center;
      background: #EEEEEE;
    }

    // .item-date {
    //   line-height: .5rem;
    // }

  }
  .filter-item:nth-last-child(1){
    border:none;
  }
  .multiCategory{
    span{
      display: block;
      float: left;
    }
  }
  .btn-slidedown{
    width: .5rem;
    height: .3rem;
    background: url("") no-repeat center / .3rem .3rem;
    -webkit-transition: all .3s;
    transform: rotate(0deg);
  }
  .subtitle{
    font-size: .32rem;
    margin-top: .1rem;
    margin-bottom: .1rem;
  }
  .slideUp{
    transform: rotate(270deg);
  }

  .popover-content{
    /*display: none;*/
    position: absolute;
    top: -.5rem;
    left: 0;
    max-width: 3rem;
    height: .3rem;
    background: #e2e2e2;
  }

  .filter-tab-button {
    margin: .1rem .12rem;
    border: 1px solid #e4e4e4;
    border-radius: .4rem;
    height: .6rem;
    line-height: .6rem;
    text-align: center;
    overflow: hidden;

    &:after {
      content: '\20';
      display: block;
      height: 0;
      clear: both;
    }

    a {
      display: block;
      float: left;
      width: 33.3333333%;
      border-left: 1px solid #e4e4e4;
      box-sizing: border-box;
      color: #9b9b9b;
      background-color: #fff;

      &:first-child {
        border-left: none;
      }

      &.active {
        background-color: #f6faff;
      }
    }
  }
  #chooseYear,
  #chooseMonth {
    display: block;
    margin: .15rem .12rem .05rem;
    width: 40%;
    height: .8rem;
    line-height: .8rem;
  }
</style>
<style>
  .vux-popup-mask {
    width: 0 !important;
    height: 0 !important;
  }

  .weui_cell_ft.with_arrow:after{
    display: none !important;
  }
  #chooseYear .weui_cell,#chooseSeason .weui_cell,
  #chooseMonth .weui_cell {
    padding: 0 !important;
    display: block !important;
    text-align: center !important;
    color: #9b9b9b !important;
  }
  #startDate .weui_cell,
  #endDate .weui_cell,
  #chooseMonthStart .weui_cell,
  #chooseMonthEnd .weui_cell {
    text-align: center !important;
    color: #9b9b9b !important;
    line-height: 1.4;
  }
  .weui_cell_bd>p{
    color: #9b9b9b;
  }
  #scrollY0{
    transform: translate3d(0px, 0px, 0px) !important;
  }

  .btn-small{
    padding: .05rem;
    margin-left: .1rem;
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    color: #fff;
    background: #4A90E2;
  }
</style>
